<template>
<!--  常俊海 第一期定制 购买会员-->
  <div class="member-buy-wrap">
    <div class="member-buy-main">
      <div class="member-buy-main-price">
        <ul>
          <li v-for="(item, index) in memeberData" :class="selectIndex == index ? 'selectClass':''" @click="selectClick(item, index)">
            <p class="price-title">{{item.title}}</p>
            <p class="price-main">
              <span>¥</span>
              <span>{{item.price}}</span>
              <span v-if="item.is_expiry == 1">/年</span>
              <span v-else>/永久</span>
            </p>
            <img v-if="selectIndex == index" src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/DZ/changjunhai/buySelect.png">
          </li>
        </ul>
      </div>
      <!--  开通按钮    -->
      <div class="openMemberBtn" @click="openMemberClick()">立即开通</div>
      <div class="member-dec" @click="agreementClick()">
        <img src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/DZ/changjunhai/icon.png">
        <span>一年服务期限</span>
        <span>《用户服务协议》</span>
      </div>
    </div>
<!--  弹窗  -->
    <transition  name="fade" >
<!--   开通弹窗   -->
      <div class="popup-wrap" v-if="ispopup">
        <div class="popup-main">
          <p class="popup-title">
            <span v-if="isallow">会员服务只可享有一种，确定购买该身份？</span>
            <span v-if="!isallow">对不起，您当前的条件不可购买</span>
          </p>
          <div class="popup-operation">
        <!--   条件允许购买    -->
            <div @click="cancelClick()" v-if="isallow">取消</div>
            <div @click="submitClick()" v-if="isallow">确定</div>
            <!--     条件不允许购买     -->
            <div class="allowBtn" @click="cancelClick()" v-if="!isallow">确定</div>
          </div>
        </div>
      </div>
<!--   用户服务协议弹窗   -->
      <div class="agreement-wrap" v-if="isAgreement">
        <div class="agreement-main">
          <p class="agreement-title">
            <span>米泉尚品至尊VIP用户协议</span>
          </p>
          <div class="agreement-desc">
            <p class="descP-b">重要须知:米泉商品商城所有权人及其关联方(下称“米泉尚品”)在此特别提
              醒用户(或称“您”)仔细阅读(未成年人应在其法定监护人的陪同下阅读)本
              《米泉尚品至尊VIP用户协议》(下称“本协议”)中的各个条款，包括但不限
              于免除或者限制米泉尚品责任的条款、对用户权利进行限制的条款以及约定争
              议解决方式、司法管辖的条款。用户有权选择同意或者不同意本协议。</p>
            <p class="descP-b">用户与米泉尚品均应当严格履行本协议及其补充协议所约定的各项义务，如发
              生争议或者纠纷，双方可以友好协商解决;协商不成的，任何一方均可向本协议
              签订地有管辖权的法院提起诉讼。用户如果通过至尊VIP开通页面点击“提交
              订单"购买至尊VIP服务,即视为完全同意本协议，愿意接受本协议所有条款的
              约束。</p>
            <p class="descP-b">本协议签订地:杭州市余杭区</p>
            <p class="descP-b">1.名词解释</p>
            <p class="descP-b">除用户与米泉尚品另有约定外，本协议及其补充协议当中的下列名词均采用如下
              解释:</p>
            <p class="descP-b">1.1米泉尚品至尊VIP会员:米泉尚品至尊VIP(下称“至尊VIP”)是米泉尚品
              精心打造的高级会员身份，并可享受专属的服务权益。受邀的米泉尚品用户(下
              称“受邀用户”)在付费开通后可拥有正式的至尊VIP会员身份，并可享受米泉
              尚品所提供的相关服务权益。</p>
            <p class="descP-b">1.2至尊VIP会员有效期:至尊VIP会员身份有有效时长限制。至尊VIP会员的
              有效期(下称"有效期")指用户至尊VIP身份的有效时长。有效期可通过购买方
              式或者积分达标获得。超过有效期后，至尊VIP身份自动消失。但通过积分达标
              者将永久享有至尊VIP的所有权益。
              1.3至尊VIP会员服务到期前1天将提醒续费，续费成功后有效期顺延1年
              (365天);至尊VIP会员为服务类商品，一经售出不予退换。</p>
            <p class="descP-b">2.协议目的</p>
            <p class="descP-b">本协议旨在约定用户在试用、购买、使用、终止至尊VIP身份的过程中与米泉尚
              品双方分别作为本协议的一方合同当事人所享有的权利和所负有的义务。</p>
            <p class="descP-b">3.开通和使用规范</p>
            <p class="descP-b">3.1至尊VIP服务目前仅针对米泉尚品部分指定用户开放，米泉尚品有权根据自
              身的运营策略设计开放的用户范围、数量、方式、渠道、时间节奏等，米泉尚品
              不保证对所有用户开放此项服务。</p>
            <p class="descP-b">3.2至尊VIP服务目前仅针对已注册的米泉尚品会员且产生过有效订单的部分用
              户开放，对于恶意注册，恶意购买及其他米泉尚品认定为不恰当获得/使用会员
              身份的用户，米泉尚品有权拒绝提供至尊VIP服务。</p>
            <p class="descP-b">3.3用户申请开通至尊VIP前，需完善个人的身份资料，包含但不限于手机号、
              地址、邮箱、性别等信息并保证信息的真实、准确、完整、合法有效、如有变动、
              应及时更新。如因用户个人资料的不合法、不真实、不准确、不详尽等原因造成
              法律风险或损失，相关责任及后果由用户自行承担。</p>
            <p class="descP-b">3.4至尊VIP服务是米泉尚品推出的有偿服务，用户开通至尊VIP需支付一定的
              服务费用。米泉尚品可能会基于业务发展需要或营销策略调整服务费用，具体以
              页面公示为准。如用户在调整公示之前已经开通至尊VIP，则服务费用不受影响;
              如用户在调整公示之后开通至尊VIP，则将按照公示的新标准执行。</p>
            <p class="descP-b">3.5至尊VIP有效期为365天，从购买支付成功次日起开始计算。有效期结束后，
              至尊VIP身份将自动失效（不含积分达标者），用户需自行决定是否继续购买开
              通至尊VIP。如开通使用过程中用户主动要求取消或终止至尊VIP服务，则米泉
              尚品会将取消或终止用户的至尊VIP身份并不退还已支付的服务费用，同时未
              来不再为提出此要求的用户开放至尊VIP服务。</p>
            <p class="descP-b">3.6用户守则:</p>
            <p class="descP-b">3.6.1开通至尊VIP后，用户需要确保账户仅限本人合理合规使用，并不得进行
              任何损害米泉尚品或其他用户合法权益的行为；</p>
            <p class="descP-b">(1)经米泉尚品判定认为存在恶意退货、拒收情形或退拒率不合常理的;</p>
            <p class="descP-b">(2)非用于个人或家庭的合理消费、通过会员权益帮别人购买商品、服务，并从
              中获利;</p>
            <p class="descP-b">(3)出借账户给他人使用泄用会员权益非法获利；转让/售卖会员权益；通过恶
              意手段刷单/刷券等；</p>
            <p class="descP-b">(4)用户因不良购买行为，或不合理/非法使用会员权益使米泉尚品遭受利益损
              失或有其他任何违反《米泉尚品服务条款》第15条的行为。</p>
            <p class="descP-b">3.6.2用户违反上述3.6.1条的，米泉尚品有权采取相应处理措施，包括但不限
              于:暂停或取消用户的至尊VIP身份;取消账户订单;取消账户优惠券;冻结或取
              消用户米泉尚品账号等。</p>
            <p class="descP-b">3.6.3如您的行为使米泉尚品及/或关联公司遭受损失(包括自身的直接经济损
              失、商誉损失及对外支付的赔偿金、和解款、律师费、诉讼费等间接经济损失)，
              您应赔偿米泉尚品及/或其关联公司的上述全部损失。</p>
            <p class="descP-b">如您的行为使米泉尚品及/或关联公司遭受第三人主张权利，米泉尚品及/或其
              关联公司可在对第三人承担金钱给付等义务后就全部损失向您追偿。</p>
            <p class="descP-b">如因您的行为使得第三人遭受损失，米泉尚品及/或其关联公司出于社会公共利
              益保护或消费者权益保护目的，可自您的任何米泉尚品账户中划扣相应款项进
              行支付。</p>
            <p class="descP-b">3.7您接受本协议，视为您同意米泉尚品在服务期限内可以通过邮件、短信、电
              话等形式向您发送营销活动相关信息，您有权选择退订。</p>
            <p class="descP-b">4.至尊VIP会员权益</p>
            <p class="descP-b">您成为至尊VIP正式会员后，可享受的正式会员权益以米泉商品官方平台公布的
              信息为准。为更好的向会员提供服务，米泉尚品有权基于自身业务发展需要调整
              全部或部分会员权益。米泉尚品就前述权益调整将在相应服务页面进行通知或公
              告，您可以通过米泉尚品官方平台查询最新的会员权益内容。</p>
            <p class="descP-b">5.协议更新及用户关注义务</p>
            <p class="descP-b">5.1根据国家法律法规变化及网站运营需要，米泉尚品有权以网站公告的方式进
              行不定期地制定、修改本协议及/或相关服务规则，暂停、取消和修改本协议条
              款，修改后的协议修改后的协议一旦公示并生效后，即代替原来的协议。用户应
              及时关注不时发布的各项服务规则及本协议的变更。若不同意相关规则及条款修
              改的，应及时终止与本站的协议。如用户继续使用本网站提供的服务的，即视为
              同意更新后的协议。米泉尚品建议您在使用本站之前阅读本协议及本站的公告。</p>
            <p class="descP-b">6.其他</p>
            <p class="descP-b">6.1米泉商品有可能以消费者告知书、买家须知、温馨提示等形式，向您说明您
              在使用至尊VIP服务时应当履行的本协议所约定的义务之外的其他义务，您亦应
              当仔细阅读并全面履行。上述说明如果与本协议相互冲突或者矛盾的，以上述约
              定为准;上述约定未涉及的内容，仍适用本协议。</p>
            <p class="descP-b">6.2如因不可抗力造成至尊VIP服务意外暂停、终止，米泉尚品将尽力协助处理
              相关善后事宜。</p>
            <p class="descP-b">6.3本协议适用中华人民共和国大陆地区法律法规，受中华人民共和国大陆地区
              法律法规管辖。如发生争议或者纠纷，双方可以友好协商解决;协商不成的，任
              何一方均可向本协议签订地有管辖权的人民法院提起诉讼。</p>
            <p class="descP-b">6.5客户如果对本协议有任何疑问或者异议的，可以向米泉尚品电话咨询，咨询
              电话为:18268036136</p>
            <p class="descP-b">6.6本协议内容中以黑体、加粗、下划线、斜体等方式显著标识的条款，请用户
              着重阅读。</p>
            <p class="descP-b">
              协议更新时间：2021年8月01日
              协议生效时间：2021年8月20日
            </p>
          </div>
          <div class="popup-operation">
            <!--   关闭    -->
            <div @click="cancelClick()">确定</div>
          </div>
        </div>
      </div>
    </transition>

  </div>
</template>

<script>
import { getMemberRankList } from '@/api/dz/dzCjh'
import Store from '@/utils/store'
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      memeberData: [], // 会员价格数据
      selectIndex: 0, // 选中Index
      ispopup: false, // 购买弹窗 状态
      isallow: true, // 条件是否允许 状态
      isAgreement: false, // 协议弹窗状态
      selectData: {}, // 选中数据
      rank_id: ''
    }
  },
  methods: {
    getRankList() {
      this.$loadingWrap.show()
      getMemberRankList({ rank_id: this.rank_id }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.memeberData = res.data
          this.selectData = this.memeberData[0]
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 选中购买价格事件
    selectClick(item, index) {
      this.selectIndex = index
      this.selectData = item
    },
    // 取消
    cancelClick() {
      this.ispopup = false
      this.isAgreement = false
    },
    // 确定
    submitClick() {
      this.ispopup = false
      const orderBuy = {}
      orderBuy.num = 1
      orderBuy.item_id = this.selectData.item_id
      orderBuy.sku = ''
      orderBuy.is_dhs_order = ''
      orderBuy.sku = ''
      orderBuy.item_cycle_sku = ''
      orderBuy.item_cycle_delivery = ''
      orderBuy.order_extry = {}
      orderBuy.order_extry.item_date = ''
      orderBuy.order_extry.item_memo = ''
      orderBuy.is_store_serve = ''
      orderBuy.scanCode = ''
      orderBuy.addressId = ''
      orderBuy.order_source = ''
      orderBuy.live_id = ''
      orderBuy.checkbox = ''
      orderBuy.assort_id = ''
      orderBuy.total_num = ''
      orderBuy.supplier_id = ''
      orderBuy.supplier = ''
      orderBuy.ng_store_id = '' // 内购门店id
      orderBuy.bmd_id = '' // 多买优惠活动id
      orderBuy.order_source = ''
      orderBuy.live_id = ''
      orderBuy.item_miao_id = ''
      orderBuy.item_limit_discount_id = ''
      orderBuy.item_bargin_id = ''
      orderBuy.item_cycle_buy_id = ''
      orderBuy.active = ''
      orderBuy.type = 'onbuy'
      Store.save('orderBuy', orderBuy)
      this.$JumpPath(this, 'buy', { itemId: this.selectData.item_id })
    },
    // 立即开通
    openMemberClick() {
      if (this.selectData.can_buy == 1) {
        this.isallow = true
        this.ispopup = true
      } else {
        this.isallow = false
        this.ispopup = true
      }
    },
    // 用户协议
    agreementClick() {
      this.isAgreement = true
    }
  },
  created() {
    this.rank_id = this.$route.query.rank_id
    this.getRankList()
  }
})
</script>
<style lang="scss">
.member-buy-wrap{
  height: 100vh;
  background: white;
  .member-buy-main{
    width: 700px;
    padding-top: 328px;
    margin: auto;
    ul{
      list-style: none;
      display: flex;
      justify-content: space-between;
      li{
        width: 210px;
        height: 260px;
        box-sizing: border-box;
        border: 2px solid #e2e2e2;
        border-radius: 16px;
        background-color: white;
        position: relative;
        .price-title{
          font-size: 24px;
          font-weight: 500;
          color: #333333;
          text-align: center;
          margin-top: 61px;
        }
        .price-main{
          margin-top: 42px;
          text-align: center;
          span:nth-child(1){
            font-size: 20px;
            font-weight: 400;
            color: #c29941;
          }
          span:nth-child(2){
            font-size: 44px;
            font-weight: 500;
            color: #c29941;
          }
          span:nth-child(3){
            font-size: 20px;
            font-weight: 400;
            color: #999999;
          }
        }
        img{
          width: 36px;
          height: 36px;
          position: absolute;
          bottom: -2px;
          right: 0;
        }
      }
    }
    .openMemberBtn{
      width: 700px;
      height: 84px;
      border-radius: 48px;
      background: linear-gradient(90deg,#f1d997, #e1c470);
      text-align: center;
      line-height: 84px;
      font-size: 32px;
      font-weight: 400;
      color: #241803;
      margin-top: 32px;
    }
    .member-dec{
      margin-top: 17px;
      text-align: center;
      img{
        width: 32px;
        height: 32px;
        vertical-align: middle;
      }
      span{
        font-size: 24px;
        font-weight: 400;
        color: #cccccc;
        line-height: 34px;
        margin-left: 24px;
      }
      span:nth-child(3){
        margin-left: 0 !important;
        color: #3385FF;
      }
    }
  }
}
  .selectClass{
    border: 2px solid #c19a3e !important;
  }
  .popup-wrap{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .popup-main{
      width: 590px;
      height: 288px;
      background: #ffffff;
      border-radius: 8px;
      position: relative;
      .popup-title{
        width: 410px;
        margin: 60px auto 0;
        text-align: center;
        font-size: 32px;
        font-weight: 400;
        color: #0f1826;
      }
      .popup-operation{
        width: 100%;
        height: 96px;
        border-top: 1px solid #ebebeb;
        position: absolute;
        left: 0;
        bottom: 0;
        div{
          width: 295px;
          float: left;
          text-align: center;
          line-height: 96px;
          font-size: 32px;
          font-weight: 400;
        }
        div:nth-child(1){
          color: #a9afb8;
          width: 294px;
          border-right: 1px solid #ebebeb;
        }
        div:nth-child(2){
          color: #3385ff;
        }
        .allowBtn{
          width: 100% !important;
          text-align: center;
          line-height: 96px;
          color: #3385ff !important;
          font-size: 32px;
        }
      }
    }
  }
  .agreement-wrap{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .agreement-main{
      width: 590px;
      height: 700px;
      background: #ffffff;
      border-radius: 8px;
      position: relative;
      .agreement-title{
        width: 410px;
        margin: 30px auto 0;
        text-align: center;
        font-size: 32px;
        font-weight: 400;
        color: #0f1826;
      }
      .agreement-desc{
        width: 100%;
        height: 500px;
        overflow-y: scroll;
        padding: 20px;
        .descP-b{
          margin-bottom: 20px;
        }
      }
      .popup-operation{
        width: 100%;
        height: 96px;
        border-top: 1px solid #ebebeb;
        position: absolute;
        left: 0;
        bottom: 0;
        div{
          width: 100%;
          text-align: center;
          line-height: 96px;
          font-size: 32px;
          font-weight: 400;
          color: #3385ff;
        }
      }
    }
  }
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
</style>
